import { keys } from "lodash"
import { FC } from "react"
import styles from "./index.less"
import { isValidKey } from "@/utils/formatData"
import { useState } from "react"
import { useEffect } from "react"


interface TextListPro<T = any> {
  marginRight?: string | number,
  textTypeList?: Array<TextType>,// key(参数类型及说明)列表
  modelList: T[],// 数据集合
  selectCard: (index: number) => void
}

export interface TextType {
  prop: string,// key字段
  propDesc: string,// key说明
}

interface ItemTextPro {
  item: TextType,
  marginRight?: string | number,
}
interface ItemKeyTextPro extends ItemTextPro {
  textTypeList: Array<TextType>
}



/**
 * 参数类型及说明
 */

// const textTypeList: Array<TextType> = [
//   {
//     prop: 'time',
//     propDesc: '时间'
//   },
//   {
//     prop: 'desc',
//     propDesc: '详情'
//   }

// ]

/**
 * 数据列表
 */
// const modelList: Array<any> = [
//   {
//     time: '2018.02~2019.03',
//     desc: '共给予三次腰穿及靴注治疗，颅压基本正常',
//     other: '其他的信息',
//   },
//   {
//     time: '2018.02~2019.03',
//     desc: '共给予三次腰穿及靴注治疗颅压基本正常；治疗时L-ASP皮试两分钟为阳性未使用',
//     other: '其他的信息',
//   },
//   {
//     time: '2018.02~2019.03',
//     desc: '共给予三次腰穿及靴注治疗，颅压基本正常',
//     other: '其他的信息',
//   }
// ]



// const isValidKey = (key: string | number | symbol, object: object): key is keyof typeof object => {
//   return key in object;
// }

/**
 * 渲染全部item
 */

const ItemText = (props: ItemTextPro) => {
  const { item, marginRight } = props
  return (
    <div className={styles.textListItem}>
      {
        Object.keys(item).map((key: string, index: number) =>
          <div
            key={key}
            className={styles.textListItemText}
            style={{ marginRight: marginRight }}>
            {isValidKey(key, item) ? item[key] : ""}
          </div>
        )
      }
    </div>
  )
}

/**
 * 
 * 指定key渲染
 */

const ItemKeyText = (props: ItemKeyTextPro) => {
  const { textTypeList, item, marginRight } = props
  return (
    <div className={styles.textListItem}>
      {
        textTypeList.map((newItem: TextType, index: number) =>
          <div
            key={newItem.prop}
            className={styles.textListItemText}
            style={{ marginRight: marginRight }}>
            {isValidKey(newItem.prop, item) ? item[newItem.prop] : ""}
          </div>
        )
      }
    </div>
  )
}


const textList: FC<TextListPro> = ({ marginRight, textTypeList, modelList = [], selectCard }) => {

  // const textItemAcId=useState<>

  const [textItemAcId, setTextItemAcId] = useState<number>(-1)

  const changeCard = (id: number) => {
    setTextItemAcId(id)
    selectCard(id)
  }

  useEffect(() => {
    (modelList) && (setTextItemAcId(modelList[0]?.id))
  }, [modelList])

  return (
    <div className={styles.textListList}>
      {
        modelList.map((item: any, index: number) => {
          return (
            <div key={index} className={`${styles.textItemBox} ${textItemAcId === item.id ? styles.textItemBoxAc : ""}`} onClick={() => { changeCard(item.id) }}>
              {
                textTypeList && textTypeList.length > 0 ?
                  <ItemKeyText textTypeList={textTypeList} item={item} marginRight={marginRight} />
                  : <ItemText item={item} marginRight={marginRight} />
              }
            </div>
          )
        })
      }
    </div>
  )
}

// textList.defaultProps = {}

export default textList